<template>
	<view class="container">
		<view class="inputContainer">
			<input type="text" class="input" :value="content" @input="input" focus="true" :maxlength="maxLength">
			<view class="numContainer">
				<text style="color: red;">{{currentLength}}</text>
				<text>/{{maxLength}}</text>
			</view>
		</view>
		<view class="btnContainer">
			<button class="btn" @click="submit()">确定</button>
		</view>
	</view>
</template>

<script>
	import * as api from '../config/api.js'
	export default {
		data(){
			return{
				id:"",
				maxLength:20,
				currentLength:"",
				content:"",
			}
		},
		onLoad(option) {
			console.log(option)
			let id = option.id
			let title = option.title
			let content = option.content
			uni.setNavigationBarTitle({
			    title: '修改'+ title
			});
			this.id = id
			this.currentLength = content.length
			this.content = content
		},
		methods:{
			input(res){
				let inputValue = res.detail.value
				this.currentLength = inputValue.length
				this.content = inputValue
			},
			submit(){
				// console.log(this.content)
				// console.log(this.id)
				let id = this.id
				// let conetnt = this.content
				let inputText = this.content
				// 获取账号名字
				let leaveUserNum = uni.getStorageSync('leaveUserNum')
				let obj = {};
				if(id == 1){
					obj = {
						leaveUserNickName:inputText
					}
				}else if(id == 8){
					obj = {
						leaveUserAddr:inputText
					}
				}
				let that = this;
				// console.log(inputText)
				// console.log(obj)
				api.editingMaterialsApi(leaveUserNum,{
					data:obj,
					success:res=>{
						if(res.code == 200){
							// console.log("成功")
							console.log(res);
							uni.showToast({
								title:"修改成功",
								icon:"none",
								success(res){
									// 更新缓存
									that.$reoladUser();
									uni.navigateBack()
								}
							})
						}else{
							uni.showToast({
								title:"修改失败",
								icon:"none"
							})
						}
					},
					fail:err=>{
						uni.showToast({
							title:"网络延迟",
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		padding-top: 15upx;
	}
	.inputContainer{
		width: 100%;
		height: 90upx;
		padding-top: 10upx;
		background-color: white;
		padding: 10upx 0upx 5upx 30upx;
	}
	.input{
		width: 100%;
		height: 70upx;
	}
	.numContainer{
		width: 80upx;
		height: 40upx;
		font-size: 28upx;
		float: right;
		margin-top: -28upx;
	}
	.btnContainer{
		margin-top: 100upx;
		width: 100%;
	}
	.btn{
		width: 40%;
		font-size: 40upx;
		font-weight: 500;
		background-color: rgba(255, 247, 254, 1.0);
	}
</style>
